<template>
    <div class="sou">
        <navBar :navtitle="titles" @click="back()"></navBar>
        <div class="box">
            <div class="box-u">
                <p class="ben" @click="tabNav(0)">本店</p>
                <p class="quan" @click="tabNav(1)">全站</p>
            </div>
            <div class="box-down">
                <div class="box-left">
                    <img class="left-img" src="../../../src/assets/image/ic_search.png" alt="">
                    <input class="left-in" type="text" placeholder="搜索商品">
                </div>
                <div class="box-right" @click="back">取消</div>
                <img class="box-dian" v-show="cur==0" src="../../../src/assets/image/ic_pointer.png" alt="">
                <img class="box-quan" v-show="cur==1" src="../../../src/assets/image/ic_pointer.png" alt="">
            </div>
        </div>
        <div class="search">
            <p class="lishi">搜索历史</p>
            <img class="li" src="../../../src/assets/image/wRemove.png" alt="">
        </div>
    </div>
</template>

<script>
import navBar from '@/components/shop/NavBar.vue'
export default {
    name:'sou',
    components:{
        navBar
    },
    data(){
        return{
            titles: "成都康莱商贸有限公司",
            cur:0,
        }
    },
    methods:{
        tabNav(index){
            this.cur= index
        },
        back(){
            this.$router.replace('/shop')
        }

    }
}
</script>

<style lang="scss" scoped>
.box{
    width: 100%;
    background: #DD3333;
    padding: 0.1rem 0.14rem;
    box-sizing: border-box;
    position: relative;
    .box-u{
        width: 100%;
        height: 0.35rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0.1rem 0 0.08rem 0;
        box-sizing: border-box;
        .ben,.quan{
            font-size: 0.12rem;
            color: #fff;
            margin-right: 0.1rem;
        }
    }
    .box-down{
        width: 100%;
        height: 0.23rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .box-left{
            width: 80%;
            height: 0.23rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            background: #fff;
            .left-img{
                width: 0.14rem;
                height: 0.14rem;
                margin: 0.02rem 0.02rem;
            }
            .left-in{
                margin-left: 0.05rem;
                width: 91.5%;
                height: 0.23rem;
                outline: none;
                border: none;
                color: #ccc;
            }
        }
        .box-right{
            font-size: 0.16rem;
            color: #fff;
        }
    }
    .box-dian{
        width: 0.15rem;
        height: 0.1rem;
        // background: #fff;
        position: absolute;
        left: 0.18rem;
        top: 0.35rem;
    }
    .box-quan{
        width: 0.15rem;
        height: 0.1rem;
        // background: #fff;
        position: absolute;
        left: 0.52rem;
        top: 0.35rem;
    }
}
.search{
    width: 100%;
    padding: 0.1rem 0.14rem 0.05rem 0.14rem;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .lishi{
        font-size: 0.12rem;
        color: #333;
        height: 0.25rem;
    }
    .li{
        width: 0.14rem;
        height: 0.14rem;
    }
}
</style>

